<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="search-line">
        <div class="search-list-line">
          <div class="search-list">
            <span class="search-list-title">班级：</span>
            <div class="search-list-content">
              <component
                  v-bind:is="item.propertyType"
                  :property.sync="item"
                  v-for="(item, index) in getPower"
                  :key="index"
                  @updateVal="updateVal"
              ></component>
            </div>
          </div>
          <div class="search-list">
            <span class="search-list-title">学生姓名：</span>
            <div class="search-list-content">
              <el-input v-model="searWord.student_name" placeholder="学生姓名" size="small" class="w-140 mr-10"></el-input>
            </div>
          </div>
        </div>
        <div class="search-list-line">
          <div class="search-list">
            <span class="search-list-title">测评类：</span>
            <div class="search-list-content">
              <el-select v-model="searWord.cate_id" placeholder="请选择" size="small">
                <el-option
                    v-for="item in cateList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="search-list">
            <span class="search-list-title">测评项：</span>
            <div class="search-list-content">
              <el-select v-model="searWord.assess_id" placeholder="请选择" size="small">
                <el-option
                    v-for="item in assessList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="search-list">
            <span class="search-list-title">评测月份：</span>
            <div class="search-list-content">
              <el-date-picker
                  v-model="searWord.month"
                  size="small"
                  type="month"
                  format="yyyyMM"
                  value-format="yyyyMM"
                  placeholder="选择月份">
              </el-date-picker>
            </div>
          </div>

        </div>
        <div class="search-list">
          <el-button type="primary" @click.native="searchBtn('search')" size="small"><i class="el-icon-search"></i>搜索
          </el-button>
          <el-button @click.native="searchBtn('refresh')" size="small"><i class="el-icon-refresh"></i>重置刷新</el-button>
          <!--          </div>-->
          <downexcel type="evaluation" :option="{class_id : searWord.class_id,month: searWord.month}" :disabled="searWord.month&&searWord.class_id?false:true" :excelName="excelNameFn()"></downexcel>
        </div>
      </div>
      <evaluating :arryList="arryList" :tableoption="tableoption"></evaluating>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import evaluating from "@/views/admin/Corner/commentCollection/evaluating";
import {collectionIndex} from '@/api/admin/collection'
import {assessCateIndex, assessIndex} from "@/api/admin/evaluating"

export default {
  components: {
    evaluating
  },
  watch:{
    'searWord.cate_id'(){
      console.log('类目变了：', this.searWord.cate_id)
      this.searWord.assess_id = ''
      this.assessList = []
      this.assessFn()
    }
  },
  data() {
    return {
      arryList: [],
      cateList: [],
      assessList:[],
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      className: '',
      // 搜索
      searWord: {
        class_id: '',
        section_id: '',
        student_name: '',
        cate_id: '',
        assess_id: '',
        is_new : 1,
        month: ''
      },
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      }
    }
  },
  created() {
    this.getCateFn()
    this.studentPointFn()
  },
  methods: {
    studentPointFn() {
      // cate_id assess_id
      let option = this.getJson(this.searWord);
      option.p = this.page.pageindex
      collectionIndex(option).then(res => {
        console.log('res:', res)
        this.arryList = res.list.data
        this.page.total = res.list.total
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.studentPointFn()
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 搜索
    searchBtn(option) {
      this.page.pageindex = 1;
      if (option === 'refresh') {
        this.searWord.student_name = '';
        this.searWord.class_id = ''
        this.searWord.section_id = ''
        this.searWord.cate_id = ''
        this.searWord.assess_id = ''
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower
      }
      this.studentPointFn()
    },
    // 获取评测类
    getCateFn(){
      assessCateIndex({p: 0}).then(res=>{
        if (!res.code) {
          this.cateList = res.list
        }
      })
    },
    // 获取评测类
    assessFn(){
      if(this.searWord.cate_id){
        assessIndex({p: 0, cate_id: this.searWord.cate_id}).then(res => {
          this.assessList = res.list
        })
      }
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchBox[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searWord[option.select[i].name] = option.select[i].valueText
          } else {
            this.searWord[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
      if(option.nameOption){
        this.className = option.nameOption
      }
    },
    excelNameFn(){
      return `${this.searWord.month}${this.className}`
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.search-line {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0 10px;
  margin-bottom: 10px;
}

.search-list {
  /*border-bottom: 1px solid #f5f5f5;*/
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.search-list:last-child {
  border-bottom: none;
}

div.v-dropdown-caller.v-dropdown-caller--full-width {
  display: block !important;
}

.search-list-left {
  display: flex;
  align-items: center;
}

.search-list-line {
  display: flex;
  border-bottom: 1px solid #f5f5f5;
}
</style>
<!--<div class="search-line">-->
<!--<div class="search-list">-->
<!--  <span class="search-list-title">区角：</span>-->
<!--  <div class="search-list-content"></div>-->
<!--</div>-->
